<template>
    <transition name="fade-box">
        <aside id="aside" v-show="showAside" @click="updateShowAside">
            <transition name="fade">
                <ul class="list" v-show="showAside">
                    <li class="item" v-for="(item,index) in list" :key="index">
                        <router-link :to="item.link">
                            <span class="name">{{item.name}}</span>
                            <van-icon name="arrow" class="arrow"></van-icon>
                        </router-link>
                    </li>
                </ul>
            </transition>
        </aside>
    </transition>
</template>

<script>
    import {
        Icon
    } from "vant";
    import {
        mapGetters,
        mapActions
    } from 'vuex'

    export default {
        data() {
            return {
                list: [{
                        name: "首页",
                        link: "/"
                    },
                    {
                        name: "影片",
                        link: "/film"
                    },
                    {
                        name: "影院",
                        link: "/cinema"
                    },
                    {
                        name: "卖座卡",
                        link: "/card"
                    },
                    {
                        name: '城市',
                        link: '/city'
                    }
                ]
            };
        },
        components: {
            [Icon.name]: Icon
        },
        computed: {
            ...mapGetters(['showAside'])
        },
        methods: {
            ...mapActions(['updateShowAside'])
        }

    };

</script>

<style scoped lang="less">
    #aside {
        height: 100%;
        position: fixed;
        top: 50px;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 999;
        background: rgba(0, 0, 0, 0.5);
    }

    .list {
        width: 265px;
        /*        position: fixed;*/
        /*        top: 50px;*/
        border-top: 1px solid #222;
        background: #282828;
        height: 100%;
    }

    .item {
        height: 50px;
        border-bottom: 1px dotted #333;

        a {
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px;
            color: #9a9a9a;

            .name {
                font-size: 14px;
            }

            .arrow {
                font-size: 12px;
                color: #666;
            }
        }
    }

    /* 动画*/
    .fade-enter-active {
        transition: all .3s ease;
    }

    .fade-leave-active {
        transition: all .3s ease;
    }

    .fade-enter {
        opacity: 0;
        transform: translateX(-100px);
    }

    .fade-leave-to {
        transform: translateX(-100px);
        opacity: 0;
    }

    /* 动画*/
    .fade-box-enter-active {
        transition: all .3s ease;
    }

    .fade-box-leave-active {
        transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        ;
    }

    .fade-box-enter {
        opacity: 0;
    }

    .fade-box-leave-to {
        opacity: 0;
    }

</style>
